<template>
  <div class="setting">
    <NavBar />

    <div class="content">
      <div class="now">
        <van-divider
          class="now"
          :style="{
            color: '#1989fa',
            borderColor: '#1989fa',
            padding: '0 16px'
          }"
          >现有栏目</van-divider
        >
        <div class="now_item">
          <span
            v-for="item in nowCates"
            :key="item._id"
            @click="handelNowColumn(item._id)"
            >{{ item.title }}</span
          >
        </div>
        <div class="del">
          <van-divider
            class="now"
            :style="{
              color: '#02a774',
              borderColor: '#02a774',
              padding: '0 16px'
            }"
            >删除栏目</van-divider
          >
          <div class="now_item">
            <span
              v-for="item in delCates"
              :key="item._id"
              @click="handelDelColumn(item._id)"
              >{{ item.title }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../../components/navbar/VideoNavbar";
import { reqCategory } from "../../../api/video";
export default {
  name: "settingPage",
  data() {
    return {
      nowCates: [],
      delCates: [],
    };
  },
  created() {
    if(!localStorage.getItem("nowCates") && !localStorage.getItem("delCates")){
      this.getCategory();
    }else{
      this.nowCates = JSON.parse(localStorage.getItem("nowCates"))
      this.delCates =JSON.parse(localStorage.getItem("delCates"))
    }
  },
  methods: {
    // 获取 tabs 栏的数据
    async getCategory() {
      const result = await reqCategory();
      this.nowCates = result;
    },

    handelNowColumn(id) {
      if(this.nowCates.length <= 4){
        return this.$toast('至少选择4项')
      }
      const index = this.nowCates.findIndex(item => item._id === id);
      this.delCates.push(this.nowCates[index]);
      this.nowCates.splice(index, 1);
    },

    handelDelColumn(id) {
      const index = this.delCates.findIndex(item => item._id === id);
      this.nowCates.push(this.delCates[index]);
      this.delCates.splice(index, 1);
    }
  },
  watch: {
    nowCates(){
      localStorage.setItem("nowCates", JSON.stringify(this.nowCates))
      localStorage.setItem("delCates", JSON.stringify(this.delCates))
    }
  },
  components: {
    NavBar
  }
};
</script>
<style lang="less" scoped>
.setting {
  .content {
    margin-top: 44px;
    .now {
      padding: 20px 10px 0 10px;

      span {
        display: inline-block;
        width: 22%;
        margin: 5px;
        padding: 5px;
        text-align: center;
        box-sizing: border-box;
        border: 1px solid #1989fa;
        color: #6cb5fe;
      }
    }
    .del {
      padding-top: 20px;
      span {
        display: inline-block;
        width: 22%;
        margin: 5px;
        padding: 5px;
        text-align: center;
        box-sizing: border-box;
        border: 1px solid #02a774;
        color: #02a774;
      }
    }
  }
}
</style>
